<template>
  <div class="tabbar">
    <div @click="btnclick(index)" :class="{active:tabbarIndex==index}" v-for="(item,index) in tabbarArr" :key="index">
        <img :src="item.pic" alt=""><br>
        <span >{{item.name}}</span>
    </div>
  </div>
</template>
<script>
let pic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.3png.com%2F3d630978d270c0ffabb665a86e36f881196f.png&refer=http%3A%2F%2Fimg1.3png.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668269247&t=09ca609d1c534ad5de57977f6ef9471d"
export default {
    data(){
        return {
            tabbarIndex:0,
            tabbarArr:[
                {pic,name:'首页'},
                {pic,name:'爆爆团'},
                {pic,name:'订单'},
                {pic,name:'我的'},
            ]
        }
    },
    methods:{
        btnclick(index){
            this.tabbarIndex=index;
        }
    }
}
</script>

<style lang="scss" scoped>
    .tabbar{
        width: 100%;
        height: 60px;
        position: fixed;
        bottom: 30px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #f5f5f5;
    }
    .tabbar div{
        width: 50px;
        height: 50px;
        text-align: center;
    }
    .tabbar span{
        width: 20%;
        height: 30px;
        text-align: center;
    }
    img{
        width: 30px;
    }
    .active{
        color: aqua;
    }
</style>

